<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-03-22 16:04:47
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-16 17:31:17
 * @FilePath: /free-learning-front/src/views/AboutView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="about">
    <!-- 头部横幅 -->
    <div class="about-banner">
      <div class="banner-content">
        <h1>关于我们</h1>
        <p class="banner-desc">免费学习平台致力于为每个人提供优质的在线教育资源，让知识触手可及</p>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="about-content">
      <!-- 使命愿景 -->
      <div class="mission-section">
        <AnimateOnScroll animation="fade-up" :threshold="0.2">
          <div class="section-header">
            <h2>我们的使命</h2>
            <div class="header-line"></div>
          </div>
          <p class="section-desc">通过技术创新和优质内容，打破教育壁垒，让每个人都能享受到优质的教育资源。我们相信，教育不应该有门槛，知识应该属于每个人。</p>
        </AnimateOnScroll>
      </div>

      <!-- 团队介绍 -->
      <div class="team-section">
        <AnimateOnScroll animation="fade-up" :threshold="0.2" :delay="0.1">
          <div class="section-header">
            <h2>我们的团队</h2>
            <div class="header-line"></div>
          </div>
          <p class="section-desc">我们的团队由经验丰富的教育工作者、技术专家和内容创作者组成，致力于为学习者提供最好的学习体验。每一位团队成员都怀揣着对教育的热情，共同打造一个开放、包容的学习平台。</p>
        </AnimateOnScroll>
      </div>

      <!-- 平台优势 -->
      <div class="advantages-section">
        <AnimateOnScroll animation="fade-up" :threshold="0.2" :delay="0.2">
          <div class="section-header">
            <h2>平台优势</h2>
            <div class="header-line"></div>
          </div>
          <div class="advantages-grid">
            <AnimateOnScroll 
              v-for="(item, index) in advantages" 
              :key="index"
              animation="fade-up" 
              :threshold="0.1" 
              :delay="0.3 + index * 0.1" 
              class="advantage-card"
            >
              <div class="advantage-icon">
                <i :class="item.icon"></i>
              </div>
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </AnimateOnScroll>
          </div>
        </AnimateOnScroll>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AnimateOnScroll from '../components/AnimateOnScroll.vue';

// 优势列表
const advantages = ref([
  {
    icon: 'fas fa-book-open',
    title: '丰富的课程资源',
    desc: '涵盖多个领域的优质课程，满足不同学习需求'
  },
  {
    icon: 'fas fa-clock',
    title: '灵活的学习方式',
    desc: '随时随地，按照自己的节奏学习，让学习更自由'
  },
  {
    icon: 'fas fa-chalkboard-teacher',
    title: '专业的师资团队',
    desc: '经验丰富的讲师提供专业指导，确保学习质量'
  },
  {
    icon: 'fas fa-comments',
    title: '互动式学习',
    desc: '通过实践和反馈提高学习效果，让学习更有趣'
  },
  {
    icon: 'fas fa-user-graduate',
    title: '个性化学习',
    desc: '根据个人需求定制学习计划，让学习更高效'
  },
  {
    icon: 'fas fa-chart-line',
    title: '学习进度追踪',
    desc: '智能分析学习数据，帮助用户了解自己的学习情况并持续进步'
  }
]);
</script>

<style scoped>
.about {
  min-height: 100vh;
  background-color: #f8f9fa;
}

.about-banner {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 80px 20px;
  text-align: center;
  margin-bottom: 60px;
}

.banner-content {
  max-width: 800px;
  margin: 0 auto;
}

.banner-content h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.banner-desc {
  font-size: 20px;
  line-height: 1.6;
  opacity: 0.9;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 36px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.header-line {
  width: 60px;
  height: 4px;
  background: #007bff;
  margin: 0 auto;
  border-radius: 2px;
}

.section-desc {
  font-size: 18px;
  line-height: 1.8;
  color: #666;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.mission-section,
.team-section {
  margin-bottom: 80px;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.advantage-card {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.advantage-icon {
  width: 60px;
  height: 60px;
  background: #e6f2ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.advantage-icon i {
  font-size: 24px;
  color: #007bff;
}

.advantage-card h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 600;
}

.advantage-card p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .about-banner {
    padding: 60px 20px;
  }

  .banner-content h1 {
    font-size: 36px;
  }

  .banner-desc {
    font-size: 18px;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .section-desc {
    font-size: 16px;
  }

  .advantages-grid {
    grid-template-columns: 1fr;
  }
}
</style> 